<html>
	<head>
		<title>Jogo de Dados -- Jogando 1 dado</title>
		<script>
			var cwidth = 400;
			var chieght = 300;
			var dicex = 50;
			var dicey = 50;
			var dicewidth = 100;
			var diceheight = 100;
			var dotrad = 6;
			var ctx;
			
			function init(){
				var ch;
				var numAleatorio;
				
				//gera um nº aleatório entre 0 e 1  e multiplica por 6
				numAleatorio = Math.random()*6;
				
				//pega a parte inteira do numAleatorio e soma um
				//ch = 1 + Math.floor (numAleatório);
				ch = 6;
				drawface(ch);
			}
			// desenha a face do dado que saiu no lance
			function drawface(n){
				// variável que obtem o objeto que é usado para desenhar no canvas
				ctx = document.getElementById('canvas').getContext('2d');
				
				//detemina a largura da linha do dado
				ctx.lineWidth = 5;
				
				//limpa o espaço para desenhar nova face do dado
				ctx.clearRect(dicex, dicey, dicewidth, diceheight);
				
				//Desenha o retangulo
				ctx.strokeRect(dicex, dicey, dicewidth, diceheight);
				
				//colore
				ctx.fillStyle = "#003366";
				//draw1();
				
				
				//Mostra que número saiu
				switch(n){
					case 1:
						draw1();
						break;
					case 2:
						draw2();
						break;
					case 3:
						draw1();
						draw2();
						break;
					case 4:
						draw4();
						break;
					case 5:
						draw4();
						draw1();
						break;
					case 6:
						draw4();
						draw2mid();
						break;
				}
			}
			//desenha face para o num 1
			function draw1(){
				var dotx;
				var doty;
				
				//começa o caminho
				ctx.beginPath();
				
				// coloca o ponto no meio do dado, horizontal e verticalmente
				dotx = dicex + 0.5*dicewidth;
				
				doty = dicey + 0.5*diceheight;
				
				//ctx.arc(dotx, doty, dotrad, 0, 2*Math.PI, true);
				ctx.arc(dotx, doty, dotrad, 0, 2*Math.PI, true);
				
				ctx.closePath();//desenha os dois circulos
				ctx.fill();//pinta o círculo
			}
			function draw2(){
			
				var dotx;
				var doty;
				
				//começa o caminho
				ctx.beginPath();
				
				// coloca o ponto no meio do dado, horizontal e verticalmente
				dotx = dicex + 3*dotrad;
				doty = dicey + 3*dotrad;
				ctx.arc(dotx, doty, dotrad, 0, 2*Math.PI, true);
				
				// desenha o ponto de baixo no dado
				dotx = dicex + dicewidth - 3 * dotrad;
				doty = dicey + diceheight - 3 * dotrad;
				ctx.arc(dotx, doty, dotrad, 0, 2*Math.PI, true);
				
				ctx.closePath();//desenha os dois circulos
				ctx.fill();//pinta o círculo
			}
			
			function draw4(){
				var dotx;
				var doty;
				//começa o caminho
				ctx.beginPath();
				
				// coloca o ponto no meio do dado, horizontal e verticalmente
				dotx = dicex + 3*dotrad;
				doty = dicey + 3*dotrad;
				ctx.arc(dotx, doty, dotrad, 0, 2*Math.PI, true);
				
				// desenha o ponto de baixo no dado
				dotx = dicex + dicewidth - 3 * dotrad;
				doty = dicey + diceheight - 3 * dotrad;
				ctx.arc(dotx, doty, dotrad, 0, 2*Math.PI, true);
				
				ctx.closePath();
				ctx.fill();
				
				ctx.beginPath();
				
				// desenha o ponto de baixo no dado
				dotx = dicex + 3*dotrad;
				doty = dicey + diceheight - 3 * dotrad;
				ctx.arc(dotx, doty, dotrad, 0, 2*Math.PI, true);
				
				dotx = dicex + dicewidth - 3 * dotrad;
				doty = dicey + 3*dotrad;
				ctx.arc(dotx, doty, dotrad, 0, 2*Math.PI, true);
				
				ctx.closePath();//pinta os circulos
				ctx.fill();//pinta o círculo
			}
			
			function draw2mid(){
				var dotx;
				var doty;	
				
				ctx.beginPath();
				
				dotx = dicex + 3*dotrad;
				doty = dicey + 0.5*diceheight;
				ctx.arc(dotx, doty, dotrad, 0, 2*Math.PI, true);
				
				dotx = dicex + dicewidth - 3 * dotrad;
				doty = dicey + 0.5*diceheight;
				ctx.arc(dotx, doty, dotrad, 0, 2*Math.PI, true);
				
				ctx.closePath();//pinta os circulos
				ctx.fill();//pinta o círculo
			}
		</script>
	</head>
	<body onload="init()">
		<canvas id = "canvas" width= "400" height="300">
			Yoour browser doesn't support canvas
		</canvas>
	</body>
</html>

























<!--<html>.
	<head>
		<title>	smile </title>
		<script> 
			function init(){
				var ctx;
				ctx = document.getElementById("canvas").getContext('2d');
				ctx.beginPath();
				ctx.strokeStyle = "rgb(200,0,0)";
				ctx.arc(200, 200, 50, 0, 2*Math.PI, false);
				ctx.closePath();
				ctx.fill();
				ctx.strokeStyle="rgb(255,0,0)";
				ctx.lineWidth = 5;
				ctx.stroke();
				
			}
		</script>
		<style>	</style>
	</head>
	<body onload="init();">
		<canvas id = "canvas" width= "400" height="300">
			Yoour browser doesn't support canvas
		</canvas>
	
	</body>
</html>	-->